<template>
    <div>
      <pstep :stepData="stepData" :doneNum="doneNum"  style="margin-bottom: 20px;"></pstep>
      <el-form class="p-form" ref="form" :model="form" label-position="left" label-width="130px">
        <el-form-item label="区域">
          <el-select style="width: 250px;" v-model="form.area" placeholder="请选择区域">
            <el-option label="东南中心" value="dn"></el-option>
            <el-option label="南方中心" value="nf"></el-option>
            <el-option label="北方中心" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实例名称">
          <el-input v-model="form.slmc" placeholder="请输入" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="可用区">
          <el-select style="width: 250px;" v-model="form.area" placeholder="请选择可用区">
            <el-option label="可用区1" value="1"></el-option>
            <el-option label="可用区4" value="4"></el-option>
            <el-option label="可用区6" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性能规格">
          <el-radio-group v-model="form.cclx">
            <el-radio-button label="SSD云盘"></el-radio-button>
          </el-radio-group>
          CPU：16U | 内存：64GB | 磁盘：2108GB | 吞吐量峰值：30000条/秒 | 入库速率：1080万条/小时 | 15亿在线SQL语句存储 | 600亿归档SQL语句存储
        </el-form-item>
  
        <div class="form-br"></div>
        <el-form-item label="虚拟私有云">
          <div style="display: flex; align-items: center;">
            <el-select style="width: 250px; margin-right: 10px;" v-model="form.xnsyy" placeholder="请选择虚拟私有云">
              <el-option label="vpc-default（192.168.0.0/16 ）" value="1"></el-option>
              <el-option label="vpc-defadsj（192.168.0.0/16 ）" value="2"></el-option>
              <el-option label="虚拟云名称（主网段）" value="3"></el-option>
            </el-select>
            <el-select style="width: 250px;" v-model="form.xnsyyzw" placeholder="请选择子网">
              <el-option label="vpc-default（192.168.0.0/16 ）" value="1"></el-option>
              <el-option label="vpc-defadsj（192.168.0.0/16 ）" value="2"></el-option>
              <el-option label="虚拟云名称（主网段）" value="3"></el-option>
            </el-select>
            <i class="el-icon-refresh-right" style="margin: 0 10px;"></i>
            <span style="color: #1890FF; cursor: pointer;">新建虚拟私有云</span>
          </div>
        </el-form-item>
        <el-form-item label="安全组">
          <div style="display: flex; align-items: center;">
            <el-select style="width: 250px;" v-model="form.aqz" placeholder="请选择安全组">
              <el-option label="Sys-FullAccess" value="1"></el-option>
              <el-option label="安全组名称" value="2"></el-option>
            </el-select>
            <i class="el-icon-refresh-right" style="margin: 0 10px;"></i>
            <span style="color: #1890FF; cursor: pointer;">新建安全组</span>
          </div>
        </el-form-item>
      </el-form>
      <div class="step-btn-box">
        <el-button type="primary" @click="handleAdd">立即创建</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import pstep from '@/components/publicStep'
  export default {
    components:{ pstep },
    data() {
      return {
        stepData: [{num:1,nameIn:'1',nameOut:'基础配置'}],
        doneNum: 1,
        form: {}
      }
    },
    methods:{
        handleAdd(){
            this.$router.push({path:'/sqlsecure/auditSql'})
        }
      }
  }
  </script>
  
  <style scoped lang="less">
    .p-form {
      /deep/.el-form-item__label {
        font-size: 16px;
        font-family: 'PingFang SC ', 'PingFang SC';
        font-weight: 650;
        font-style: normal;
        color: rgba(0, 0, 0, 0.847058823529412);
      }
    }
  
    .addnum {
      display: flex;
  
      .explain {
        margin-left: 10px;
        line-height: 50px;
        font-size: 12px;
        color: #AAAAAA;
      }
    }
  
    .form-br {
      height: 1px;
      background-color: #ebebeb;
      width: 100%;
      margin-bottom: 15px;
    }
  
    .role-desbox {
      width: 932px;
      min-height: 125px;
  
      .escplasin {
        margin-left: 10px;
        font-size: 12px;
        color: #AAAAAA;
      }
  
      .esclist {
        height: 50px;
        display: flex;
        align-items: center;
  
        div {
          color: #333333;
          width: 160px;
          text-align: center;
        }
      }
  
      .esclist-t {
        height: 35px;
        background-color: rgba(242, 242, 242, 1);
      }
  
    }
  
    .tag-btn {
      margin-right: 15px;
      height: 22px;
      width: 22px;
      line-height: 22px;
      text-align: center;
      border: 1px #1890FF solid;
      border-radius: 50%;
      color: #1890FF;
  
      &:hover {
        background-color: #1890FF;
        color: #ffffff;
      }
    }
  
    /deep/.el-radio-button {
  
      border-radius: 4px;
      overflow: hidden;
    }
  
    /deep/.el-radio-button {
      .el-radio-button__inner {
        background-color: rgba(188, 223, 255, 1);
        color: #716E6E;
        font-size: 16px;
      }
  
      &.is-active {
        .el-radio-button__inner {
          background-color: #1890FF;
          color: #ffffff;
  
        }
      }
    }
  
    .pcarea3 {
      font-size: 12px;
      color: #FF3636;
    }
  </style>